<!DOCTYPE html>
  
  
  
  
   <html class="no-js"> 

  <head lang="en-us">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <title>Change the sort order - NoNonsense FilePicker</title>
    <meta name="generator" content="Hugo 0.16" />

    
    <meta name="description" content="An extensible and flexible file-picker for Android.">
    
    <link rel="canonical" href="http://spacecowboy.github.io/NoNonsense-FilePicker/example/sortorder/">
    
    <meta name="author" content="SpaceCowboy">
    

    <meta property="og:url" content="http://spacecowboy.github.io/NoNonsense-FilePicker/example/sortorder/">
    <meta property="og:title" content="NoNonsense FilePicker">
    
    <meta name="apple-mobile-web-app-title" content="NoNonsense FilePicker">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="shortcut icon" type="image/x-icon" href="http://spacecowboy.github.io/NoNonsense-FilePicker/images/favicon.ico">
    <link rel="icon" type="image/x-icon" href="http://spacecowboy.github.io/NoNonsense-FilePicker/images/favicon.ico">

    <style>
      @font-face {
        font-family: 'Icon';
        src: url('http://spacecowboy.github.io/NoNonsense-FilePicker/fonts/icon.eot?52m981');
        src: url('http://spacecowboy.github.io/NoNonsense-FilePicker/fonts/icon.eot?#iefix52m981')
               format('embedded-opentype'),
             url('http://spacecowboy.github.io/NoNonsense-FilePicker/fonts/icon.woff?52m981')
               format('woff'),
             url('http://spacecowboy.github.io/NoNonsense-FilePicker/fonts/icon.ttf?52m981')
               format('truetype'),
             url('http://spacecowboy.github.io/NoNonsense-FilePicker/fonts/icon.svg?52m981#icon')
               format('svg');
        font-weight: normal;
        font-style: normal;
      }
    </style>

    <link rel="stylesheet" href="http://spacecowboy.github.io/NoNonsense-FilePicker/stylesheets/application.css">
    <link rel="stylesheet" href="http://spacecowboy.github.io/NoNonsense-FilePicker/stylesheets/temporary.css">
    <link rel="stylesheet" href="http://spacecowboy.github.io/NoNonsense-FilePicker/stylesheets/palettes.css">
    <link rel="stylesheet" href="http://spacecowboy.github.io/NoNonsense-FilePicker/stylesheets/highlight/highlight.css">

    
    
    
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,700|Roboto%2bMono">
    <style>
      body, input {
        font-family: 'Roboto', Helvetica, Arial, sans-serif;
      }
      pre, code {
        font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
      }
    </style>

    
    <script src="http://spacecowboy.github.io/NoNonsense-FilePicker/javascripts/modernizr.js"></script>

    

  </head>
  <body class="palette-primary-red palette-accent-light green">



	
	


<div class="backdrop">
	<div class="backdrop-paper"></div>
</div>

<input class="toggle" type="checkbox" id="toggle-drawer">
<input class="toggle" type="checkbox" id="toggle-search">
<label class="toggle-button overlay" for="toggle-drawer"></label>

<header class="header">
	<nav aria-label="Header">
  <div class="bar default">
    <div class="button button-menu" role="button" aria-label="Menu">
      <label class="toggle-button icon icon-menu" for="toggle-drawer">
        <span></span>
      </label>
    </div>
    <div class="stretch">
      <div class="title">
        Change the sort order
      </div>
    </div>

    

    
    <div class="button button-github" role="button" aria-label="GitHub">
      <a href="https://github.com/spacecowboy" title="@spacecowboy on GitHub" target="_blank" class="toggle-button icon icon-github"></a>
    </div>
    
    
        
  </div>
  <div class="bar search">
    <div class="button button-close" role="button" aria-label="Close">
      <label class="toggle-button icon icon-back" for="toggle-search"></label>
    </div>
    <div class="stretch">
      <div class="field">
        <input class="query" type="text" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck>
      </div>
    </div>
    <div class="button button-reset" role="button" aria-label="Search">
      <button class="toggle-button icon icon-close" id="reset-search"></button>
    </div>
  </div>
</nav>
</header>

<main class="main">
	<div class="drawer">
		<nav aria-label="Navigation">
  <a href="https://github.com/spacecowboy/NoNonsense-FilePicker" class="project">
    <div class="banner">
      
      <div class="name">
        <strong>NoNonsense FilePicker </strong>
        
          <br>
          spacecowboy/NoNonsense-FilePicker
        
      </div>
    </div>
  </a>

  <div class="scrollable">
    <div class="wrapper">
      
        <ul class="repo">
          <li class="repo-download">
            <a href="https://github.com/spacecowboy/NoNonsense-FilePicker/archive/master.zip" target="_blank" title="Download" data-action="download">
              <i class="icon icon-download"></i> Download
            </a>
          </li>
          <li class="repo-stars">
            <a href="https://github.com/spacecowboy/NoNonsense-FilePicker/stargazers" target="_blank" title="Stargazers" data-action="star">
              <i class="icon icon-star"></i> Stars
              <span class="count">&ndash;</span>
            </a>
          </li>
        </ul>
        <hr>
      

      <div class="toc">
        
        <ul>
          




<li>
  
    



<a  title="Readme" href="http://spacecowboy.github.io/NoNonsense-FilePicker/readme/">
	
	Readme
</a>


  
</li>



<li>
  
    



<a  title="Changelog" href="http://spacecowboy.github.io/NoNonsense-FilePicker/changelog/">
	
	Changelog
</a>


  
</li>



<li>
  
    



<a  title="License" href="http://spacecowboy.github.io/NoNonsense-FilePicker/license/">
	
	License
</a>


  
</li>



<li>
  
    <span class="section">Examples</span>
    <ul>
      
        
        



<a class="current" title="Change the sort order" href="http://spacecowboy.github.io/NoNonsense-FilePicker/example/sortorder/">
	
	Change the sort order
</a>


<ul id="scrollspy">
</ul>

      
        
        



<a  title="Filter based on file extension" href="http://spacecowboy.github.io/NoNonsense-FilePicker/example/filter_file_extension/">
	
	Filter based on file extension
</a>


      
        
        



<a  title="Custom item layout" href="http://spacecowboy.github.io/NoNonsense-FilePicker/example/custom_item_layout/">
	
	Custom item layout
</a>


      
        
        



<a  title="Override the back button" href="http://spacecowboy.github.io/NoNonsense-FilePicker/example/override_back_button/">
	
	Override the back button
</a>


      
        
        



<a  title="Override selection behavior" href="http://spacecowboy.github.io/NoNonsense-FilePicker/example/override_selection_behavior/">
	
	Override selection behavior
</a>


      
        
        



<a  title="Standalone fragment" href="http://spacecowboy.github.io/NoNonsense-FilePicker/example/standalone_fragment/">
	
	Standalone fragment
</a>


      
    </ul>
  
</li>


        </ul>
        

        
        <hr>
        <span class="section">The author</span>
        
        <ul>
          

          
          <li>
            <a href="https://github.com/spacecowboy" target="_blank" title="@spacecowboy on GitHub">
              @spacecowboy on GitHub
            </a>
          </li>
          
        </ul>
        
      </div>
    </div>
  </div>
</nav>

	</div>

	<article class="article">
		<div class="wrapper">
			<h1>Change the sort order </h1>

			

<p>By default, the SD-card picker will display all files in alphabetical order. But what if you want a different sort-order?</p>

<p>You can override the sorting by overriding the <code>compareFiles</code>-method:</p>
<div class="highlight" style="background: #f0f0f0"><pre style="line-height: 125%"><span></span>    <span style="color: #555555; font-weight: bold">@Override</span>
    <span style="color: #007020; font-weight: bold">protected</span> <span style="color: #902000">int</span> <span style="color: #06287e">compareFiles</span><span style="color: #666666">(</span>File lhs<span style="color: #666666">,</span> File rhs<span style="color: #666666">)</span> <span style="color: #666666">{</span>
        <span style="color: #007020; font-weight: bold">if</span> <span style="color: #666666">(</span>lhs<span style="color: #666666">.</span><span style="color: #4070a0">isDirectory</span><span style="color: #666666">()</span> <span style="color: #666666">&amp;&amp;</span> <span style="color: #666666">!</span>rhs<span style="color: #666666">.</span><span style="color: #4070a0">isDirectory</span><span style="color: #666666">())</span> <span style="color: #666666">{</span>
            <span style="color: #007020; font-weight: bold">return</span> <span style="color: #666666">-</span><span style="color: #40a070">1</span><span style="color: #666666">;</span>
        <span style="color: #666666">}</span> <span style="color: #007020; font-weight: bold">else</span> <span style="color: #007020; font-weight: bold">if</span> <span style="color: #666666">(</span>rhs<span style="color: #666666">.</span><span style="color: #4070a0">isDirectory</span><span style="color: #666666">()</span> <span style="color: #666666">&amp;&amp;</span> <span style="color: #666666">!</span>lhs<span style="color: #666666">.</span><span style="color: #4070a0">isDirectory</span><span style="color: #666666">())</span> <span style="color: #666666">{</span>
            <span style="color: #007020; font-weight: bold">return</span> <span style="color: #40a070">1</span><span style="color: #666666">;</span>
        <span style="color: #666666">}</span>
        <span style="color: #60a0b0; font-style: italic">// This was the previous behaviour for all file-file comparisons. Now it&#39;s</span>
        <span style="color: #60a0b0; font-style: italic">// only done if the files have the same extension, or no extension.</span>
        <span style="color: #007020; font-weight: bold">else</span> <span style="color: #007020; font-weight: bold">if</span> <span style="color: #666666">(</span>getExtension<span style="color: #666666">(</span>lhs<span style="color: #666666">)</span> <span style="color: #666666">!=</span> <span style="color: #007020; font-weight: bold">null</span> <span style="color: #666666">&amp;&amp;</span> getExtension<span style="color: #666666">(</span>lhs<span style="color: #666666">).</span><span style="color: #4070a0">equalsIgnoreCase</span><span style="color: #666666">(</span>getExtension<span style="color: #666666">(</span>rhs<span style="color: #666666">))</span> <span style="color: #666666">||</span>
                getExtension<span style="color: #666666">(</span>lhs<span style="color: #666666">)</span> <span style="color: #666666">==</span> <span style="color: #007020; font-weight: bold">null</span> <span style="color: #666666">&amp;&amp;</span> getExtension<span style="color: #666666">(</span>rhs<span style="color: #666666">)</span> <span style="color: #666666">==</span> <span style="color: #007020; font-weight: bold">null</span><span style="color: #666666">)</span> <span style="color: #666666">{</span>
            <span style="color: #007020; font-weight: bold">return</span> lhs<span style="color: #666666">.</span><span style="color: #4070a0">getName</span><span style="color: #666666">().</span><span style="color: #4070a0">compareToIgnoreCase</span><span style="color: #666666">(</span>rhs<span style="color: #666666">.</span><span style="color: #4070a0">getName</span><span style="color: #666666">());</span>
        <span style="color: #666666">}</span>
        <span style="color: #60a0b0; font-style: italic">// Otherwise, we sort on extension placing files with no extension last.</span>
        <span style="color: #007020; font-weight: bold">else</span> <span style="color: #007020; font-weight: bold">if</span> <span style="color: #666666">(</span>getExtension<span style="color: #666666">(</span>lhs<span style="color: #666666">)</span> <span style="color: #666666">!=</span> <span style="color: #007020; font-weight: bold">null</span> <span style="color: #666666">&amp;&amp;</span> getExtension<span style="color: #666666">(</span>rhs<span style="color: #666666">)</span> <span style="color: #666666">!=</span> <span style="color: #007020; font-weight: bold">null</span><span style="color: #666666">)</span> <span style="color: #666666">{</span>
            <span style="color: #60a0b0; font-style: italic">// Both have extension, just compare extensions</span>
            <span style="color: #007020; font-weight: bold">return</span> getExtension<span style="color: #666666">(</span>lhs<span style="color: #666666">).</span><span style="color: #4070a0">compareToIgnoreCase</span><span style="color: #666666">(</span>getExtension<span style="color: #666666">(</span>rhs<span style="color: #666666">));</span>
        <span style="color: #666666">}</span> <span style="color: #007020; font-weight: bold">else</span> <span style="color: #007020; font-weight: bold">if</span> <span style="color: #666666">(</span>getExtension<span style="color: #666666">(</span>lhs<span style="color: #666666">)</span> <span style="color: #666666">!=</span> <span style="color: #007020; font-weight: bold">null</span><span style="color: #666666">)</span> <span style="color: #666666">{</span>
            <span style="color: #60a0b0; font-style: italic">// Left has extension, place it first</span>
            <span style="color: #007020; font-weight: bold">return</span> <span style="color: #666666">-</span><span style="color: #40a070">1</span><span style="color: #666666">;</span>
        <span style="color: #666666">}</span> <span style="color: #007020; font-weight: bold">else</span> <span style="color: #666666">{</span>
            <span style="color: #60a0b0; font-style: italic">// Right has extension, place it first</span>
            <span style="color: #007020; font-weight: bold">return</span> <span style="color: #40a070">1</span><span style="color: #666666">;</span>
        <span style="color: #666666">}</span>
    <span style="color: #666666">}</span>
</pre></div>

<h3 id="before-and-after">Before and After</h3>

<p><img src="http://spacecowboy.github.io/NoNonsense-FilePicker/screenshots/sorting_before.png" width="30%" alt="Before"/>
<img src="http://spacecowboy.github.io/NoNonsense-FilePicker/screenshots/sorting_after.png" width="30%" alt="After"/></p>

<h3 id="full-fragment-code">Full Fragment code</h3>
<div class="highlight" style="background: #f0f0f0"><pre style="line-height: 125%"><span></span><span style="color: #007020; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">com.nononsenseapps.filepicker.FilePickerFragment</span><span style="color: #666666">;</span>

<span style="color: #007020; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">java.io.File</span><span style="color: #666666">;</span>

<span style="color: #007020; font-weight: bold">public</span> <span style="color: #007020; font-weight: bold">class</span> <span style="color: #0e84b5; font-weight: bold">SortedFilePickerFragment</span> <span style="color: #007020; font-weight: bold">extends</span> FilePickerFragment <span style="color: #666666">{</span>

    <span style="color: #60a0b0; font-style: italic">/**</span>
<span style="color: #60a0b0; font-style: italic">     *</span>
<span style="color: #60a0b0; font-style: italic">     * @param file</span>
<span style="color: #60a0b0; font-style: italic">     * @return The file extension. If file has no extension, it returns null.</span>
<span style="color: #60a0b0; font-style: italic">     */</span>
    <span style="color: #007020; font-weight: bold">private</span> String <span style="color: #06287e">getExtension</span><span style="color: #666666">(</span><span style="color: #555555; font-weight: bold">@NonNull</span> File file<span style="color: #666666">)</span> <span style="color: #666666">{</span>
        String path <span style="color: #666666">=</span> file<span style="color: #666666">.</span><span style="color: #4070a0">getPath</span><span style="color: #666666">();</span>
        <span style="color: #902000">int</span> i <span style="color: #666666">=</span> path<span style="color: #666666">.</span><span style="color: #4070a0">lastIndexOf</span><span style="color: #666666">(</span><span style="color: #4070a0">&quot;.&quot;</span><span style="color: #666666">);</span>
        <span style="color: #007020; font-weight: bold">if</span> <span style="color: #666666">(</span>i <span style="color: #666666">&lt;</span> <span style="color: #40a070">0</span><span style="color: #666666">)</span> <span style="color: #666666">{</span>
            <span style="color: #007020; font-weight: bold">return</span> <span style="color: #007020; font-weight: bold">null</span><span style="color: #666666">;</span>
        <span style="color: #666666">}</span> <span style="color: #007020; font-weight: bold">else</span> <span style="color: #666666">{</span>
            <span style="color: #007020; font-weight: bold">return</span> path<span style="color: #666666">.</span><span style="color: #4070a0">substring</span><span style="color: #666666">(</span>i<span style="color: #666666">);</span>
        <span style="color: #666666">}</span>
    <span style="color: #666666">}</span>

    <span style="color: #60a0b0; font-style: italic">/**</span>
<span style="color: #60a0b0; font-style: italic">     * Compare two files to determine their relative sort order. This follows the usual</span>
<span style="color: #60a0b0; font-style: italic">     * comparison interface. Override to determine your own custom sort order.</span>
<span style="color: #60a0b0; font-style: italic">     *</span>
<span style="color: #60a0b0; font-style: italic">     * @param lhs File on the &quot;left-hand side&quot;</span>
<span style="color: #60a0b0; font-style: italic">     * @param rhs File on the &quot;right-hand side&quot;</span>
<span style="color: #60a0b0; font-style: italic">     * @return -1 if if lhs should be placed before rhs, 0 if they are equal,</span>
<span style="color: #60a0b0; font-style: italic">     * and 1 if rhs should be placed before lhs</span>
<span style="color: #60a0b0; font-style: italic">     */</span>
    <span style="color: #555555; font-weight: bold">@Override</span>
    <span style="color: #007020; font-weight: bold">protected</span> <span style="color: #902000">int</span> <span style="color: #06287e">compareFiles</span><span style="color: #666666">(</span>File lhs<span style="color: #666666">,</span> File rhs<span style="color: #666666">)</span> <span style="color: #666666">{</span>
        <span style="color: #007020; font-weight: bold">if</span> <span style="color: #666666">(</span>lhs<span style="color: #666666">.</span><span style="color: #4070a0">isDirectory</span><span style="color: #666666">()</span> <span style="color: #666666">&amp;&amp;</span> <span style="color: #666666">!</span>rhs<span style="color: #666666">.</span><span style="color: #4070a0">isDirectory</span><span style="color: #666666">())</span> <span style="color: #666666">{</span>
            <span style="color: #007020; font-weight: bold">return</span> <span style="color: #666666">-</span><span style="color: #40a070">1</span><span style="color: #666666">;</span>
        <span style="color: #666666">}</span> <span style="color: #007020; font-weight: bold">else</span> <span style="color: #007020; font-weight: bold">if</span> <span style="color: #666666">(</span>rhs<span style="color: #666666">.</span><span style="color: #4070a0">isDirectory</span><span style="color: #666666">()</span> <span style="color: #666666">&amp;&amp;</span> <span style="color: #666666">!</span>lhs<span style="color: #666666">.</span><span style="color: #4070a0">isDirectory</span><span style="color: #666666">())</span> <span style="color: #666666">{</span>
            <span style="color: #007020; font-weight: bold">return</span> <span style="color: #40a070">1</span><span style="color: #666666">;</span>
        <span style="color: #666666">}</span>
        <span style="color: #60a0b0; font-style: italic">// This was the previous behaviour for all file-file comparisons. Now it&#39;s</span>
        <span style="color: #60a0b0; font-style: italic">// only done if the files have the same extension, or no extension.</span>
        <span style="color: #007020; font-weight: bold">else</span> <span style="color: #007020; font-weight: bold">if</span> <span style="color: #666666">(</span>getExtension<span style="color: #666666">(</span>lhs<span style="color: #666666">)</span> <span style="color: #666666">!=</span> <span style="color: #007020; font-weight: bold">null</span> <span style="color: #666666">&amp;&amp;</span> getExtension<span style="color: #666666">(</span>lhs<span style="color: #666666">).</span><span style="color: #4070a0">equalsIgnoreCase</span><span style="color: #666666">(</span>getExtension<span style="color: #666666">(</span>rhs<span style="color: #666666">))</span> <span style="color: #666666">||</span>
                getExtension<span style="color: #666666">(</span>lhs<span style="color: #666666">)</span> <span style="color: #666666">==</span> <span style="color: #007020; font-weight: bold">null</span> <span style="color: #666666">&amp;&amp;</span> getExtension<span style="color: #666666">(</span>rhs<span style="color: #666666">)</span> <span style="color: #666666">==</span> <span style="color: #007020; font-weight: bold">null</span><span style="color: #666666">)</span> <span style="color: #666666">{</span>
            <span style="color: #007020; font-weight: bold">return</span> lhs<span style="color: #666666">.</span><span style="color: #4070a0">getName</span><span style="color: #666666">().</span><span style="color: #4070a0">compareToIgnoreCase</span><span style="color: #666666">(</span>rhs<span style="color: #666666">.</span><span style="color: #4070a0">getName</span><span style="color: #666666">());</span>
        <span style="color: #666666">}</span>
        <span style="color: #60a0b0; font-style: italic">// Otherwise, we sort on extension placing files with no extension last.</span>
        <span style="color: #007020; font-weight: bold">else</span> <span style="color: #007020; font-weight: bold">if</span> <span style="color: #666666">(</span>getExtension<span style="color: #666666">(</span>lhs<span style="color: #666666">)</span> <span style="color: #666666">!=</span> <span style="color: #007020; font-weight: bold">null</span> <span style="color: #666666">&amp;&amp;</span> getExtension<span style="color: #666666">(</span>rhs<span style="color: #666666">)</span> <span style="color: #666666">!=</span> <span style="color: #007020; font-weight: bold">null</span><span style="color: #666666">)</span> <span style="color: #666666">{</span>
            <span style="color: #60a0b0; font-style: italic">// Both have extension, just compare extensions</span>
            <span style="color: #007020; font-weight: bold">return</span> getExtension<span style="color: #666666">(</span>lhs<span style="color: #666666">).</span><span style="color: #4070a0">compareToIgnoreCase</span><span style="color: #666666">(</span>getExtension<span style="color: #666666">(</span>rhs<span style="color: #666666">));</span>
        <span style="color: #666666">}</span> <span style="color: #007020; font-weight: bold">else</span> <span style="color: #007020; font-weight: bold">if</span> <span style="color: #666666">(</span>getExtension<span style="color: #666666">(</span>lhs<span style="color: #666666">)</span> <span style="color: #666666">!=</span> <span style="color: #007020; font-weight: bold">null</span><span style="color: #666666">)</span> <span style="color: #666666">{</span>
            <span style="color: #60a0b0; font-style: italic">// Left has extension, place it first</span>
            <span style="color: #007020; font-weight: bold">return</span> <span style="color: #666666">-</span><span style="color: #40a070">1</span><span style="color: #666666">;</span>
        <span style="color: #666666">}</span> <span style="color: #007020; font-weight: bold">else</span> <span style="color: #666666">{</span>
            <span style="color: #60a0b0; font-style: italic">// Right has extension, place it first</span>
            <span style="color: #007020; font-weight: bold">return</span> <span style="color: #40a070">1</span><span style="color: #666666">;</span>
        <span style="color: #666666">}</span>
    <span style="color: #666666">}</span>
<span style="color: #666666">}</span>
</pre></div>


			<aside class="copyright" role="note">
				
				&copy; 2016 Released under the Mozilla Public License 2.0 &ndash;
				
				Documentation built with
				<a href="https://www.gohugo.io" target="_blank">Hugo</a>
				using the
				<a href="http://github.com/digitalcraftsman/hugo-material-docs" target="_blank">Material</a> theme.
			</aside>

			<footer class="footer">
				

<nav class="pagination" aria-label="Footer">
  <div class="previous">
  
      <a href="http://spacecowboy.github.io/NoNonsense-FilePicker/example/custom_item_layout/" title="Custom item layout">
        <span class="direction">
          Previous
        </span>
        <div class="page">
          <div class="button button-previous" role="button" aria-label="Previous">
            <i class="icon icon-back"></i>
          </div>
          <div class="stretch">
            <div class="title">
              Custom item layout
            </div>
          </div>
        </div>
      </a>
  
  </div>

  <div class="next">
  
      <a href="http://spacecowboy.github.io/NoNonsense-FilePicker/changelog/" title="ChangeLog">
        <span class="direction">
          Next
        </span>
        <div class="page">
          <div class="stretch">
            <div class="title">
              ChangeLog
            </div>
          </div>
          <div class="button button-next" role="button" aria-label="Next">
            <i class="icon icon-forward"></i>
          </div>
        </div>
      </a>
  
  </div>
</nav>





			</footer>
		</div>
	</article>

	<div class="results" role="status" aria-live="polite">
		<div class="scrollable">
			<div class="wrapper">
				<div class="meta"></div>
				<div class="list"></div>
			</div>
		</div>
	</div>
</main>

    <script>
    
      var base_url = 'http:\/\/spacecowboy.github.io\/NoNonsense-FilePicker\/';
      var repo_id  = 'spacecowboy\/NoNonsense-FilePicker';
    
    </script>

    <script src="http://spacecowboy.github.io/NoNonsense-FilePicker/javascripts/application.js"></script>
    

    <script>
      /* Add headers to scrollspy */
      var headers   = document.getElementsByTagName("h2");
      var scrollspy = document.getElementById('scrollspy');

      if(scrollspy) {
        if(headers.length > 0) {
          for(var i = 0; i < headers.length; i++) {
            var li = document.createElement("li");
            li.setAttribute("class", "anchor");

            var a  = document.createElement("a");
            a.setAttribute("href", "#" + headers[i].id);
            a.setAttribute("title", headers[i].innerHTML);
            a.innerHTML = headers[i].innerHTML;
            
            li.appendChild(a)
            scrollspy.appendChild(li);
          }
        } else {
          scrollspy.parentElement.removeChild(scrollspy)
        }
        

        /* Add permanent link next to the headers */
        var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");

        for(var i = 0; i < headers.length; i++) {
            var a = document.createElement("a");
            a.setAttribute("class", "headerlink");
            a.setAttribute("href", "#" + headers[i].id);
            a.setAttribute("title", "Permanent link")
            a.innerHTML = "#";
            headers[i].appendChild(a);
        }
      }
    </script>

    

    <script src="//gohugo.io/js/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
  </body>
</html>
